<template>
  <div class="page_container">
    <p style="color: white;">The screen is supposed to be dark. In this part you need to use visualization to boost your learning.</p>

    <div class="middle_container">
      <!-- 左按钮 -->
      <div class="left_button">
        <el-button type="primary" style="margin:49% 50px;" @click="get_last_question">Previous</el-button>
      </div>
      <div class="question_container">
        <div class="title_container">
          <div class="title" />
          <div class="title_text">{{ form.question_type }}</div>
        </div>
        <div id="comment">{{ form.comment }}</div>
        <div id="number">No.{{ form.question_number }}</div>
        <div id="question">{{ form.question_text }}</div>
        <el-input v-model="form.user_answer" class="input" placeholder="Please input your answer here!" />
        <div id="scrambled">
          <span v-for="(optional,index) in form.scrambles" :key="index" class="options" @click="Unscramble($event)">{{ optional }}</span>
        </div>
        <div id="show">{{ form.show }}</div>
        <div class="bottomBtn">
          <el-button id="emptyBtn" type="primary" @click="onEmpty">Empty</el-button>
          <el-button id="submitBtn" type="primary" @click="onSubmit">{{ form.button_text }}</el-button>
        </div>
        <!-- <p>YOUR ANSWER:{{form.user_answer}}</p> -->
      </div>

      <!-- 右按钮 -->
      <div class="right_button">
        <el-button type="primary" style="margin: 49% 100px;" @click="get_next_question">Next</el-button>
      </div>
    </div>

    <div class="progress_container">
      <div class="outside_progress">
        <div class="inside_progress">
          <p style="text-align: right; padding-right: 10px;">{{ form.progress }}%</p>
        </div>
      </div>
      <el-button class="conclude_button">Conclude for now</el-button>
      <el-button class="quit_button">Quit</el-button>
    </div>

    <div class="bottom_container">
      <el-button type="primary" style="margin-left: 200px;">Acculturation</el-button>
      <el-button type="primary">Interaction</el-button>
      <el-button type="primary">Narration</el-button>
      <el-button type="primary">Literacy</el-button>
      <el-button type="primary">Lexis</el-button>
      <el-button type="primary">Syntax</el-button>
      <el-button type="primary">Extended Interaction</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        comment: 'Miscellaneous.',
        question_type: 'UNSCRAMBLE',
        question_number: '1',
        question_text: 'Where are you going in the afternoon?',
        user_answer: '',
        scrambles: ['going', 'am', 'I', '.', 'school', 'to'],
        show: '',
        warn: 'you can\'t input null string',
        true_answer: 'I am going to school.',
        counter: '',
        button_text: 'Submit',
        seen: false,
        progress: 59
      }
    }
  },
  created() {
    // shuffle the scrambles
    for (let i = this.form.scrambles.length; i; i--) {
      const j = Math.floor(Math.random() * i);
      [this.form.scrambles[i - 1], this.form.scrambles[j]] = [this.form.scrambles[j], this.form.scrambles[i - 1]]
    }
  },
  methods: {
    onSubmit() {
      if (this.form.button_text === 'Submit') {
        if (this.form.user_answer === '') {
          this.form.show = this.form.warn
        } else {
          this.form.show = 'The true answer is: ' + this.form.true_answer
          this.form.button_text = 'Next'
        }
      }
      if (this.form.button_text === 'Next') {
        // TODO
        // get next question's data
      }
    },
    onEmpty() {
      this.form.user_answer = ''
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    },
    Unscramble: function(event) {
      var inputText = this.form.user_answer
      var text = event.currentTarget.innerText
      this.form.user_answer = inputText + ' ' + text
    },
    get_next_question() {},
    get_last_question() {}
  }
}

</script>

<style scoped>
  .page_container{
    position: relative;
    background: rgb(4,4,4);
    height: 800px;
  }
  .title_container{
    position: relative;
    width: 300px;
    height: 100px;
    font-size: 0px;
    overflow: hidden;
    margin: 10px 10px;
  }
  .title{
    position: absolute;
    display: inline-block;
    height: 60px;
    width: 10px;
    margin-left: 10px;
    background: #409EFF;
  }
  .title_text{
    position: absolute;
    display: inline-block;
    margin-top: 5px;
    margin-left: 20px;
    height: 50px;
    width: 250px;
    color: white;
    background: #1F2D3D;
    font-size: 16pt;
    text-align: center;
    padding: 15px;
  }
  .middle_container{
    width: 100%;
    height: 60%;
    overflow: hidden;
    position: relative;
  }
  .left_button{
    position: absolute;
    height: 100%;
    width: 20%;
  }
  .question_container{
    border: 2px solid white;
    border-radius: 10px;
    position: absolute;
    margin:0px 20%;
    width: 60%;
    height: 100%;
    font-size: 20px;
    color: white;
  }
  .right_button{
    position: absolute;
    margin-left: 80%;
    height: 60%;
    width: 20%;
  }
  #number{
    width: 200px;
    height: 30px;
    margin: 0 20px;
  }
  #question{
    width: 90%;
    height: 30px;
    font-size: 20px;
    margin: 0 30px;
  }
  #answer{
    width: 90%;
    height: 30px;
    font-size: 20px;
    margin: 0 30px;
  }
  .input{
    width: 60%;
    margin: 20px 0 0 30px;
  }
  #show{
    width: 90%;
    height: 50px;
    padding-top: 15px;
    border: 1px solid white;
    margin: 50px 0 0 30px;
    text-align: center;
  }
  .progress_container{
    width: 100%;
    height: 100px;
    margin: 10px 30px;
    position: relative;
  }
  .outside_progress{
    margin-top: 20px;
    height: 20px;
    width: 400px;
    border-radius: 10px;
    background: #A13E0D;
  }
  .inside_progress{
    height: 100%;
    width: 230px;
    border-radius: 10px;
    padding-right: 2px;
    background: #00FF00;
  }
  .conclude_button{
    position: absolute;
    margin: 0 70%;
  }
  .quit_button{
    position: absolute;
    margin: 0 90%;
  }
  .bottom_container{
    width: 100%;
    height: 45px;
    margin: 20px 0 0 0;
    border: 2px solid white;
  }
  #scrambled{
    margin: 20px 0px;
  }
  .options{
    background-color: rgb(58,58,58);
    margin-left: 10px;
    text-align: center;
    padding: 10px 20px;
    color: white;
    cursor: pointer;
  }
  .bottomBtn{
    position: relative;
    margin: auto;
    width: 800px;
    margin-top: 20px;
  }
  #emptyBtn{
    margin-left: 20%;
  }
  #submitBtn{
    margin-left: 35%;
  }
  #comment{
    font-size: 18pt;
    margin-left: 10px;
  }
</style>
